<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body{
			margin:0; 
			padding:0; 
			height:100%; 
			width: 100%;
		}
		#wrapper{
			background:#ddd;
			display:grid;
		}
		#mapdiv{
			margin:0; 
			padding:0;
			grid-row: 1 / 3;
		}
    </style>
	<!-- Change the name of the webpage into each city. -->
    <title>New York</title>
	<script>
	//<!-- If there is only two scenic spot, delete the first "else if" part and change the condition of the second "else if" into "index === 2". -->
	function back(){
		if(index === 1){
            document.getElementById("content1")
                    .style.display= "";
            document.getElementById("photo1")
                    .style.display= "";
            document.getElementById("content2")
                    .style.display= "none";
            document.getElementById("photo2")
                    .style.display= "none";
			map.setCenter(lonLat1, zoom1);
			index++;
		}
		else if(index === 2){
            document.getElementById("content1")
                    .style.display= "none";
            document.getElementById("photo1")
                    .style.display= "none";
            document.getElementById("content2")
                    .style.display= "";
            document.getElementById("photo2")
                    .style.display= "";
			map.setCenter(lonLat2, zoom2);
			index = 1;
	}}
	
	<!-- If there is only two scenic spot, delete the first "else if" part and change the condition of the second "else if" into "index === 2". -->
	function forward(){
		if(index === 1){
			document.getElementById("content1")
					.style.display= "";
			document.getElementById("photo1")
					.style.display= "";
			document.getElementById("content2")
					.style.display= "none";
			document.getElementById("photo2")
					.style.display= "none";
			map.setCenter(lonLat1, zoom1);
			index = 2;
		}
		else if(index === 2){
            document.getElementById("content1")
                    .style.display= "none";
            document.getElementById("photo1")
                    .style.display= "none";
            document.getElementById("content2")
                    .style.display= "";
            document.getElementById("photo2")
                    .style.display= "";
            map.setCenter(lonLat2, zoom2);
			index--;
		}
	}
	</script>
</head>

<body bgcolor="#362619">

<table id ="top" width=100% height="110px" align="center" cellpadding="0" cellspacing="0" style="background:#362619">
  <tbody>
  <tr height=5%>
  </tr>
  <tr height=40%>
	<!-- Change the name of the headline of each city. -->
	<!-- p.s. "&nbsp;" means space here. -->
  	<td colspan="2" style="size:5px;color:#FFFFFF;font-family:lucida calligraphy;">&nbsp;&nbsp;New York</td>
  </tr>
  <tr height=30%>
	<!-- Change the name of the brief introduction of each city. -->
	<td colspan="2" style="size:2px;color:#C5D5D5;font-family:lucida calligraphy;">&nbsp;&nbsp;&nbsp;This is the seventh stop of Phileas Fogg's tour.</td>
  </tr>
  <tr height=25%>
    <!-- Link the corresponding webpage address after "href=" --> <!-- This part should be finished by Jiazhe at last. -->
	<th width="77%"></th>
	<th width="8%" style="text-align:center"><a id="link1" href="San Francisco.html" style="size:2px;color:#C5D5D5;font-family:Calibri;"> LAST STOP </a></th>
	<th width="8%" style="text-align:center"><a id="link2" href="London.html" style="size:2px;color:#C5D5D5;font-family:Calibri;"> NEXT STOP </a></th>
	<th width="7%" style="text-align:center"><a id="link3" href="../Main%20page.html  " style="size:2px;color:#C5D5D5;font-family:Calibri;">  RETURN  </a></th>
  </tr>
</table>

<div id="wrapper">
<div id="mapdiv" style="margin:0px; padding:0; background:#3E3D35; float:left; height:720px; width:100%; position:relative"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>
<script>
        map = new OpenLayers.Map("mapdiv");
        map.addLayer(new OpenLayers.Layer.OSM());

        //Set start centre point and zoom
		//For Suez, the first and final point is (32.446568, 30.593634), shift the center lonlat a little bit to show the kml point on the left.
        var lonLat1 = new OpenLayers.LonLat(-73.959274, 40.730779)
            .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
            );
        var zoom1=14;
        
		//Set the second centre point and zoom
		var lonLat2 = new OpenLayers.LonLat(-73.981777,40.727848)
				.transform(
					new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
					map.getProjectionObject() // to Spherical Mercator Projection
				);
		var zoom2=15;
		

		map.setCenter(lonLat1, zoom1);
		
		var kmllayer = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "./kml/NewYork.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });
        
		map.addLayer(kmllayer); 

		var index = 2;
	
</script>

<div align="center" id="photoShow" style="margin:0; padding:0; background:#3E3D35; float:left; height:450px; width:700px; position:absolute;top:135px;left:900px;">
    <button id="back" style="width:58px; height:89px; background:url(./icon/1.png); float:right; position:absolute; top:43%; margin-top:1px; left:1%; margin-left:1px; border:none" onclick="back();"></button>
    <button id="forward" style="width:58px; height:89px; background:url(./icon/2.png); float:right; position:absolute; top:43%; margin-top:1px; right:1%; margin-right:1px; border:none" onclick="forward();"></button>
    <!--Change the src of each scenic spot. -->
	<img id="photo1" src="./Photo/New York Suspension Bridge.jpg" style="width:700px;">
	<img id="photo2" src="./Photo/Washington Square.png" style="width:700px; display: none;">
</div>


<!-- Change the table height and to adjust the text window. -->
<table id ="content1" width="700px" height="220px" align="center" cellpadding="0" cellspacing="0" style="background:#3E3D35; position:absolute; top:585px; left:900px;" >
  <tbody>
  <tr height="10px"></tr>
  <tr>
	<td width="10px"></td>
	<!-- change the name of the name of each scenic spot. -->
	<!-- p.s. "</br>" means starting from the next line. -->
  	<td valign="top" width="170px" style="size:3px;color:#FFFFFF;font-family:Arial;">New York Suspension Bridge</td>
	<!-- change the introduction. -->
	<td valign="top" style="size:2px;color:#FFFFFF;font-family:Arial;">The Brooklyn Bridge is a hybrid cable-stayed/suspension bridge in New York City. It connects the boroughs of Manhattan and Brooklyn, spanning the East River. It is one of the oldest roadway bridges in the United States and was the world's first steel-wire suspension bridge, as well as the first fixed crossing across the East River.
		The Brooklyn Bridge started construction in 1869 and was completed fourteen years later in 1883. It was originally called the New York and Brooklyn Bridge and the East River Bridge, but it was later dubbed the Brooklyn Bridge. Since opening, the Brooklyn Bridge has become an icon of New York City.		
		</td>
    <td width="10px"></td>
  </tr>
</table>



<!-- Change the table height and to adjust the text window. -->
<table id ="content2" width="700px" height="220px" align="center" cellpadding="0" cellspacing="0" style="background:#3E3D35; position:absolute; top:585px; left:900px; display: none;" >
  <tbody>
  <tr height="10px"></tr>
  <tr>
	<td width="10px"></td>
	<!-- change the name of the name of each scenic spot. -->
	<!-- p.s. "</br>" means starting from the next line. -->
  	<td valign="top" width="170px" style="size:3px;color:#FFFFFF;font-family:Arial;">Washington Square</td>
	<!-- change the introduction. -->
	<td valign="top" style="size:2px;color:#FFFFFF;font-family:Arial;">Washington Square Park is a public park in the Greenwich Village neighborhood of Lower Manhattan, New York City. As one of the best known of New York City's public parks, it is an icon as well as a meeting place and center for cultural activity. 
		Washington Square used to be a swamp, a cemetery at the end of the 18th century, where people who died of yellow fever were buried. This bloody history began to change after it became a park in 1827. In 1916, Duxiang and Sloan, the founders of Dadaism, led a group of artists to the arch of Washington Square, thus opening a new era of art and vitality in Washington Square.
		</td>
    <td width="10px"></td>
  </tr>
</table>


</div>

</body>
</html>